<template>
  <view :class="s.index">
    <view :class="s.loginContent">
      <AtInput
        clear
        required
        :error="usernameErr"
        v-model:value="userName"
        max-Length="20"
        :border="false"
        title="用户名"
        placeholder="请输入用户名"
        type="text"
        :value="value4"
      />
      <AtInput
        clear
        required
        v-model:value="password"
        name="value3"
        maxLength="20"
        title="密码"
        type="password"
        :border="false"
        placeholder="请输入密码"
        :value="value3"
        :error="passwordErr"
      />
      <AtInput
        clear
        required
        maxLength="20"
        v-model:value="nextPassword"
        :error="samePasswordErr"
        name="value3"
        title="确认密码"
        type="password"
        placeholder="再次输入密码"
        :value="value3"
      />
    </view>
    <at-button type="primary" :loading="loading" @tap="startRegister"
      >注册</at-button
    >
        <view @tap="goLogin">已经有账号了!去登陆吧</view>
        <view>{{text}}</view>
  </view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import Taro from '@tarojs/taro'
import { AtInput } from "taro-ui-vue3";
import { AtButton } from 'taro-ui-vue3'
interface register{
    userName:string,
    password:string,
    nextPassword:string
}

export default defineComponent({
  components: {
    AtInput,
    AtButton,
  },
  setup(){
    const text = ref<string>("两次输入的密码不正确")
      let err = reactive({
        usernameErr: ref<boolean>(false),
        passwordErr: ref<boolean>(false),
        samePasswordErr: ref<boolean>(false)
      })
      let loading = ref<boolean>(false)
      let register = reactive<register>({
          userName:"",
          password:"",
          nextPassword:""
      })
      async function startRegister() {
        loading.value=true
        if(!register.password||!register.userName||!register.nextPassword){
          text.value="请输入用户名或密码或确认密码"
          loading.value = false
          return ;
        }
        if(register.password&&register.userName&&register.nextPassword&&register.password === register.nextPassword){
          console.log("startRegister")
          let registerConfig={
            url:"https://www.ttzxh.icu:443/api/user/register",
            method:"POST",
            data:{
              username:register.userName,
              password:register.password,
              realname:register.userName
            }
          }
          let data = await Taro.request(registerConfig)
          console.log(data)
          data.data.error===-1&&goLogin()
        }else{
          console.log(register.userName)
          text.value="两次密码不正确"
        }
        loading.value = false
      }
      function goLogin() {
        Taro.redirectTo({
          url:"/pages/login/login"
        })
      }
      return {
          ...toRefs(register),
          ...toRefs(err),
          text,
          loading,
          startRegister,
          goLogin
      }
  }
});
</script>

<style lang="scss" module="s">
.index {
  width: 750rpx;
  height: 100vh;
  .loginContent{
    margin-bottom: 8Px;
  }
}
</style>